<template>
  <view class="container">
    <view class="diy-search">
      <view class="inner">
        <text class="search-icon iconfont icon-search"></text>
        <input placeholder-style="color:#bbb;font-size:12px;" type="text" placeholder="请输入关键词搜索" />
        <view class="search_btn">搜索</view>
      </view>
    </view>
    <view class="detail">
      <view class="title">资金明细</view>
      <view class="des">账户余额：19999</view>

      <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
        <view class="list">
          <view class="item" v-for="(item, index) in list" :key="index">
            <view class="left">
              <image
                class="img"
                src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/bonus-avator.png"
                mode="scaleToFill"
              />
              <view class="info">
                <view class="left-title">{{ item.title }}</view>
                <view class="left-des">{{ item.des }}</view>
                <view class="time">
                  <text>{{ item.time }}</text>
                </view>
              </view>
            </view>
            <view class="right">
              <view class="money" :class="item.money > 0 ? 'add' : 'reduce'">
                {{ item.money > 0 ? "+" + item.money : item.money }}</view
              >
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: 100,
          status: "已完成",
          des: "项目：川美研学",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: -100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: 100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: -100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: 100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: -100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: 100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: -100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: 100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: -100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: 100,
          status: "已完成",
        },
        {
          title: "招生收入-王子晗报名奖金",
          time: "2020-12-12 12:12:12",
          money: -100,
          status: "已完成",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: linear-gradient(180deg, #c1f26d 0%, #f6f6f6 100%);
  height: 100%;
  padding-top: 36rpx;

  .detail {
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
      font-family: HarmonyOS Sans SC;
      font-weight: bold;
      font-size: 40rpx;
      color: #000000;
      line-height: 40rpx;
      padding-left: 48rpx;
      margin-top: 32rpx;
    }

    .des {
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #656565;
      padding-left: 50rpx;
      line-height: 28rpx;
      margin-top: 26rpx;
    }

    .list {
      margin-top: 26rpx;
      .item {
        width: 702rpx;
        height: 176rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.13);
        border-radius: 20rpx;
        padding: 24rpx 24rpx 32rpx 36rpx;
        margin: 0 auto;
        margin-bottom: 18rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          display: flex;
          // align-items: center;
          .img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 120rpx;
          }

          .info {
            margin-left: 10rpx;

            .left-title {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 28rpx;
              line-height: 28rpx;
              color: #000000;
            }

            .time {
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #656565;
              transform: scale(0.916667);
              margin-left: -12rpx;
            }
            .left-des {
              font-family: HarmonyOS Sans SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000;
              margin-top: 18rpx;
            }
          }
        }

        .right {
          .money {
            font-size: 16rpx;

            &.add {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #f95513;
            }

            &.reduce {
              font-family: HarmonyOS Sans SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #0f0;
            }
          }
        }
      }
    }
  }
}

.diy-search {
  background: #f1f1f2;
  // font-size: 26rpx;
  width: 706rpx;
  height: 68rpx;
  margin: 0 auto;
  border-radius: 68rpx;
  overflow: hidden;
  margin-bottom: 14rpx;
}

.inner {
  height: 68rpx;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 2px solid #f95513;
  padding: 0 20rpx;
  position: relative;
  border-radius: 68rpx;

  &.radius {
    border-radius: 10rpx;
  }

  &.round {
    border-radius: 68rpx;
  }

  .search-icon {
    margin-right: 8rpx;
    color: #f95513;
    font-weight: bold;
  }

  .search_btn {
    width: 102rpx;
    height: 48rpx;
    background: #a2ff00;
    border-radius: 24rpx;
    font-family: HarmonyOS Sans SC;
    font-weight: 400;
    font-size: 10px;
    color: #010101;
    line-height: 48rpx;
    text-align: center;
    position: absolute;
    right: 8rpx;
  }
}

.search-input {
  height: 60rpx;
  line-height: 60rpx;
  color: #999;
  padding: 0 20rpx;
}
</style>
